<!--
 * @Description: 
 * @Author: 晋龍
 * @Date: 2021-07-10 08:12:09
 * @LastEditors: 晋龍
 * @LastEditTime: 2021-07-13 19:56:02
-->
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行学天下-首页</title>
  <link rel="stylesheet" href="css/index.css">
  <!-- 从静态资源服务器引入jQuery  bootcdn 加速服务-->
  <script type="text/javascript" src="js/jquery.js">
    // <script type="text/javascript" src="js/jquery.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <div class="headLeft">
        <div class="logo" @click="toIndex()">
          行学天下
        </div>
        <div class="title" @click="toIndex()">
          行学天下
        </div>
      </div>
      <div class="headRight">
        <div class="callMe">
          <a href="#callMe">
            <img src="image/callMe.png" alt="图片丢失了">
            联系我们
          </a>
        </div>
      </div>
    </div>

    <!-- 自己写的轮播图 -->
    <!-- <div class="lunBoTu">
      <div class="lunBoTuImg">
        <ul>
          <li class="item" style="display: block;">
            <img src="image/picture1.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture2.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture3.jpg" alt="图片丢失">
          </li>
        </ul>
      </div>
      <div class="lnBtn">
        <div class="lastBtn">
          <img src="image/last.png" alt="图片丢失">
        </div>
        <div class="nextBtn">
          <img src="image/next.png" alt="图片丢失">
        </div>
      </div>
      <div class="smallBtn">
        <ul>
          <li class="btn active"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
      </div>
    </div> -->
    
    <!-- 引入组件库的轮播图 -->
    <!-- {{carousel}} -->
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in carousel" :key="item.id">
        <img :src="item.url" alt="">
      </el-carousel-item>
    </el-carousel>
    
     <!-- 精选游学项目 -->
     <div class="youXue">
      <div class="myH2">
        精选游学项目
      </div>
      <!-- {{project}} -->
      <div class="myUl" v-for="item in project" @click="toDetails(item.id)">
        <!-- <img v-if="!item.figure" src="image/img1.jpg" alt=""> -->
        <el-empty v-if="!item.figure" description="没有图片" :image-height="200" image-width="350"></el-empty>
        <img v-else :src="item.figure" alt="">
        <div class="title">{{item.name}}</div>
        <div class="date">{{ formatDate(item.beginTime) }} ~ {{formatDate(item.endTime)}}</div>
        |
        <div class="city">{{item.region}}</div>
        <div class="desc">{{item.introduce}}</div>
      </div>
    </div>

   <!-- 学生风采 -->
   <div class="fengCai">
    <div class="myH2">
      学生风采
    </div>
    <div class="myFengCaiDiv">
      <!-- {{article}} -->
      <div class="myFengCai" v-for="item in article" @click="toFengCai(item.id)">
        <el-empty v-if="!item.cover" description="您的图片已走失，请重新加载" :image-size="100"></el-empty>
        <img v-else :src="item.cover" alt="">
        <div class="title">{{item.title.length < 16?item.title:item.title.slice(0,15)+'...'}}</div>
        <div class="date">{{formatDate(item.publishTime)}}</div>
        <div class="name">{{item.baseUser.realname}}</div>
        <div class="like"><i class="el-icon-star-off"></i>{{item.thumpUp}}</div>
        <div class="likeBtn">
          <el-button type="warning" icon="el-icon-star-off" circle @click.stop="thumbUp(item.id)"></el-button>
        </div>
      </div>
    </div>
  </div>

    <!--常见问题-->
    <div class="wenTi">
      <div class="myH2">
        常见问题
      </div>
      <div class="myWenTi">
        <div class="title">通过短期项目传换成长期项目</div>
        <div class="desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.选择一些偏向于研学类的短期项目，把重点放在学上，而不是游上。我见过很多家长报的那种团又贵又没学几天的团，真的很坑啊，大家要注意，这种团说白了就是少儿旅行团，跟留学没有半毛钱关系。你们玩了好几天，学校质量怎么样，周边社区如何，新西兰整体教育环境满不满意都没有感受到。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.这种项目对于去的学校质量要求会高一些，不要选质量太差的学校，在西方基础教育真的差别很大的，好的贼好，差的就跟国内希望小学一样。我知道现在市面上有一种非常不好的风气，就是你去之前中介都不告诉你孩子去的那所学校，这一点真的非常有趣。不过这也不能全怪中介，因为他们都是找的当地的地接或者第三方，根据报完名后的数量再去看哪所学校还有名额。这个真的很坑啊，就相当于告诉你要出国玩，然后不告诉你去哪，结果去的蒙古国~~~<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.一定要搞清楚你去的到底是全真插班的团还是所谓的国际班。这也是不同的，全真插班说白了就是与当地学生一起在学校上课；国际班（也许现在有新颖的名字了）说白了就是大家一起上英语实验班，只教你英语，别的根本体会不到。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.这种团质量好坏主要看学校质量（如果机构告诉你名字得前提下），寄宿家庭，安全保障，地接服务质量（比如行前指导，接送机，上下学交通，课堂联谊活动等）。
        <br><br><img src="image/picture1.jpg" alt="图片丢失">
        </div>
      </div>
      <div class="myWenTi">
        <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
        <div class="desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。
        <br><br><img src="image/xxl.png" alt="">
        </div>
      </div>
       <!-- 返回顶部 -->
       <el-backtop :bottom=200>
      </el-backtop>
    </div>

    <!--页面底部信息-->
    <div class="footer">
      <div id="callMe" class="callMe">
         联系我们（工作时间：9:00-17:30）
         021-56778147
        <a href="https://briup.cn">http://briup.cn</a>
        <!-- 通过qq实现在线客服功能 -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1729448763&Site=%e6%9d%b0%e6%99%ae&Menu=yes">在线客服</a>
      </div>
      <div class="beiAn">
        <a href="http://beian.miit.gov.cn">京ICP备123456789号</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
      </div>
      <div class="callMe">
        ©1999-2021杰普软件科技有限公司
      </div>  
    </div>
</div>
</body> 

<!-- <script>
  var index = 0;
  var timer;
  // 通过定时器切换图片
  function myTimer() {
    timer = setInterval(
      function () {
        index++;
        if (index > 2) {
          index = 0
        }
        $('.item').eq(index).show().siblings().hide();
        // 改变小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
      }, 3000
    )
  }
  this.myTimer();
  var that = this;
  // 通过左右键切换图片
  $('.nextBtn').click(function () {
    index++;
    if (index > 2) {
      index = 0;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  $('.lastBtn').click(function () {
    index--;
    if (index < 0) {
      index = 2;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  // 点击小圆点切换图片
  $('.btn').click(function () {
    // 获取用户点击的列表元素下标
    index = $(this).index();
    // 切换图片
    $('.item').eq(index).show().siblings().hide();
    // 给小圆点添加样式
    $(this).addClass('active').siblings().removeClass('active')
    // 重置定时器
    clearInterval(timer);
    that.myTimer();
  })
</script> -->

<!-- 请求网络数据 -->
<script>
 new Vue({
   el: '#app',
   data: {
     project: [],
     article: [],
     carousel: [],
   },
   created() {
     this.findProject();
     this.findArticle();
     this.findCarousel();
   },
   methods: {
     // 查询游学项目
     findProject() {
       axios.get('http://47.94.46.113:8888/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
         this.project = res.data.data.list
       })
     },
     // 将时间戳格式化
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD')
     },
     // 查询学生风采
     findArticle() {
       axios.get('http://47.94.46.113:8888/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
         this.article = res.data.data.list
       })
     },
     // 查询所有轮播图
     findCarousel() {
       axios.get('http://47.94.46.113:8888/index/carousel/findAll').then((res) => {
         this.carousel = res.data.data
       })
     },
     // 跳转到游学项目详情页面
     toDetails(id) {
       window.location.href = "details.html?id=" + id;
     },
      // 跳转到学生风采详情页面
      toFengCai(id) {
       window.location.href = "fengcai.html?id=" + id;
     },
     // 学生风采点赞
     thumbUp(id) {
       axios.get('http://47.94.46.113:8888/index/article/thumbUp?id=' + id).then((res) => {
         // 刷新点赞数
         this.findArticle();
         this.$message({
           message: res.data.message,
           type: 'success'
         });
       })
     }
   }
 })
</script>
</html>